<template>
	<page-meta :root-font-size="fontValue + 'px'"></page-meta>
	<view>
		<uni-nav-bar title="提现" leftIcon="back" @clickLeft="$tab.back()" :statusBar="true" :fixed="true" :border="false"
			background-color="#F93D3E" color="#FFF">
		</uni-nav-bar>

		<view class="px-32 py-36 mt-32 bg-FFF flex items-center justify-between text-28">
			<view class="flex items-center">
				<view class="font-700">
					提现至：
				</view>
				<view class="">
					支付宝
				</view>
			</view>
			<image src="https://coo.fcios.com/profile/upload/2023/01/17/icon_down.png" mode="" class="image_1"></image>
		</view>

		<view class="mt-32 bg-FFF px-32 py-32">
			<view class="flex items-center justify-between">
				<view class="text-28 font-700">
					可提现金额：{{balance}}元
				</view>
				<view class="fontS-24 text-gray" @click="price = balance">
					全部提现
				</view>
			</view>
			<view>
				<view class="mt-24 flex mflex items-center pb-12">
					<view class="text-48 font-700">
						￥
					</view>
					<u--input type="digit" v-model="price" fontSize="22px" placeholder="填写金额" border="none"></u--input>
				</view>
				<u-line color="#F0F0F0"></u-line>
			</view>
			<view class="text-gray text-20 mt-20">
				<!-- 	注：提现金额请输入整百，最低提现100，手续费包含在提现金额中。 -->
			</view>

			<!-- 	<view class="mt-48 text-28 flex items-center justify-between">
				<view class="text-gray">
					提现手续费比例：
				</view>
				<view class="">
					{{serviceCharge}}
				</view>
			</view> -->
			<view class="mt-28 text-28 flex items-center justify-between">
				<view class="text-gray">
					预计到账时间：
				</view>
				<view class="">
					24小时内
				</view>
			</view>
			<view class="mt-28 text-28 flex items-center justify-between">
				<view class="text-gray">
					提现注意事项：
				</view>
				<view class="text-F40600" @click="showTips">
					点击查看
				</view>
			</view>

			<view class="box_1 round-8 text-center text-28 text-FFF" @click="confirm">
				立即提现
			</view>
		</view>

		<view class="px-32 bg-FFF py-32 mt-32">
			<view class="text-28 flex items-center justify-between">
				<view class="text-36 font-700">
					提现明细
				</view>
				<view class="flex items-center" @click="timePicker = true">
					<view class="mr-12">
						{{selectedTime}}
					</view>
					<u-icon name="arrow-down-fill" :bold="true" color="#000"></u-icon>
				</view>
			</view>

			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="text-28 mt-28" v-for="(item,index) in list" :key="index">
					<u-line color="#EDEDED"></u-line>
					<view class="py-36">
						<view class="flex items-center justify-between">
							<view>
								提现
							</view>
							<view class="text-36 text-FF8400">
								￥{{item.withdrawAmount}}
							</view>
						</view>
						<view class="text-gray flex items-center justify-between mt-32" v-if="item.verifyState == 1">
							<view class="flex items-center">
								</image>
								<view class="ml-16">
									实际到账：
								</view>
							</view>
							<view v-if="item.realAmount">
								￥{{item.realAmount}}
							</view>
						</view>
						<view class="text-gray flex items-center justify-between mt-32" v-if="item.verifyState == 1">
							<view class="flex items-center">
								</image>
								<view class="ml-16">
									实际到账时间：
								</view>
							</view>
							<view v-if="item.paymentTime">
								{{item.paymentTime}}
							</view>
						</view>

						<view class="text-gray flex items-center justify-between mt-32">
							<view class="flex items-center">
								</image>
								<view class="ml-16">
									申请时间：
								</view>
							</view>
							<view>
								{{item.createTime}}
							</view>
						</view>
						<view class="text-gray flex items-center justify-between mt-32">
							<view class="flex items-center">
								<view class="ml-16">
									申请状态：
								</view>
							</view>
							<view>
								<u-tag v-if="item.verifyState == 0" text="待审核" type="warning"></u-tag>
								<u-tag v-if="item.verifyState == 1" text="审核通过" type="success"></u-tag>
								<u-tag v-if="item.verifyState == 2" text="审核失败" type="error"></u-tag>
							</view>
						</view>
						<view class="text-gray flex items-center justify-between mt-32"
							v-if="item.verifyState != 0 && item.remark">
							<view class="flex items-center">
								<view class="ml-16">
									审核备注：{{item.remark}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>

		<u-datetime-picker :show="timePicker" v-model="time" @confirm="timeConfirm" @close="timePicker=false"
			@cancel="timePicker=false" mode="year-month" :formatter="formatter" :closeOnClickOverlay="true"
			:maxDate="maxtime" :minDate="minDate"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				price: "",
				timePicker: false,
				selectedTime: null,
				time: Number(new Date()),
				list: [],
				balance: null,
				serviceCharge: null,
				maxtime: Number(new Date()),
				minDate: Number(new Date()),
				moneyId: null,
				fontValue: this.$store.getters.fontValue
			};
		},
		onLoad(e) {
			thro = this
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			})
			// #endif
			this.selectedTime = this.$modal.timeFun(Number(new Date()), 'YYYY-MM')
			this.moneyId = e.moneyId
			this.getData()
		},
		onShow() {
			this.refresh()
		},
		methods: {
			async getData() {
				const res = await this.$Api.user.userRichInfo()
				res.data.forEach(item => {
					console.log(this.moneyId)
					if (item.moneyId == this.moneyId) {
						this.balance = item.amount
					}
				})
				// this.serviceCharge = res.serviceRate
			},
			showTips() {
				uni.showModal({
					showCancel: false,
					title: "注意事项",
					content: "提现申请后等待后台审核，审核通过后到账!",
				})
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					this.$Api.user.withdrawRecordList({
						moneyId: this.moneyId,
						pageNum: pullScroll.page,
						pageSize: 10,
						createTime: this.selectedTime + '-01 00:00:00'
					}).then(res => {
						console.log(res, '提现记录')
						if (pullScroll.page == 1) {
							this.list = [];
						}
						res.rows = res.rows ? res.rows : []
						this.list = this.list.concat(res.rows);
						if (pullScroll.page == 1 && res.total == 0) {
							pullScroll.empty();
							return
						}
						if (this.list.length >= res.total) {
							pullScroll.finish();
						} else {
							pullScroll.success();
						}
					})
				}, 500);
			},
			confirm: throttle(2000, async () => {
				if (thro.$store.getters.userInfo.zfbOpenId) {
					if (thro.price == "" || thro.price < 0.01) {
						return
					}

					const res = await thro.$Api.user.withdrawRecord({
						withdrawAmount: thro.price,
						withdrawWay: 2,
						moneyId: thro.moneyId,
					})

					thro.$modal.msg('提现申请成功!')
					thro.refresh()
				} else {
					thro.$modal.msg('请先在app端绑定支付宝账户!')
				}
			},{
				noTrailing:true
			}),
			timeConfirm(e) {
				this.selectedTime = this.$modal.timeFun(e.value, 'YYYY-MM')
				this.timePicker = false
				this.refresh()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.box_1 {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 48rpx auto 0;
		background-color: #F93D3E;
	}

	.image_1 {
		width: 48rpx;
		height: 48rpx;
	}

	@keyframes up {
		0% {
			bottom: -380rpx;
		}

		100% {
			bottom: 100rpx;
		}
	}

	@keyframes down {
		0% {
			bottom: 100rpx;
		}

		100% {
			bottom: -380rpx;
		}
	}

	.box_2 {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;

		.box_3 {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.box_8 {
			animation: up 0.5s linear forwards;
		}

		.box_9 {
			animation: up 0.5s down forwards;
		}

		.box_4 {
			width: 686rpx;
			position: absolute;
			left: 32rpx;
			z-index: 1;

			.box_5 {
				height: 112rpx;
				background: url(https://coo.fcios.com/profile/upload/2023/01/16/card_bg.png);
				background-size: 100% 100%;
				line-height: 112rpx;
			}

			.image_2 {
				position: absolute;
				right: 28rpx;
				top: 32rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.box_6 {
				width: 36rpx;
				height: 36rpx;
				border: 2rpx solid #F93D3E;
			}

			.box_7 {
				width: 16rpx;
				height: 16rpx;
				background: #F93D3E;
			}
		}
	}


	.box-8 {
		color: #F93D3E;
	}
</style>